<template>
  <div class="skuSelectCard">
    <div class="headerSlot">
      {{$tt('tip_1688_commodity_details')}}
    </div>
    <div class="search">
      <el-input v-model="searchUrl" :placeholder="$tt('tip_please_input_1688_link')" type="text" >
        <el-button @click="getSkuData" slot="append">{{$tt('label_gain')}}</el-button>
      </el-input>
    </div>
    <div class="infoSlot">
      <div>
        <div class="infoName">{{info.categoryName}}</div>
        <!-- <p>{{info.subject}}</p> -->
        <el-select v-model="val" @change="selectFunc" clearable filterable :placeholder="$tt('tip_please_select')">
          <el-option
            v-for="item in info.skuList"
            :key="item.skuId"
            :label="item.skuName"
            :value="item.skuId">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- <div class="footerSlot"></div> -->
  </div>
</template>

<script>
export default {
  name: 'sku_select_card',
  components: {},
  props: {
    apiKeys: '',
  },
  data() {
    return {
      isSearch: true,
      info: {
        skuList: [

        ]
      },
      val: '',
      searchUrl: '',
      platformProductCode: '',
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    selectFunc(val, item) {
      const o = this.info.skuList.find(ie => ie.skuId === val)
      console.log(o);

      this.$emit('change', {...o, platformProductCode: this.platformProductCode})
    },
    getId() {
      try {
        return this.searchUrl.match(/\/offer\/(\d+)/)[1]
      } catch (error) {
        return ''
      }
    },
    getSkuData() {
      this.platformProductCode = this.getId()
      if (!this.platformProductCode) return this.$message.error(this.$tt('label_enter_correctlysku_link'))
      this.isSearch = false
      this.$ajax({
        url: "/mms-api/client/SkuPlatformRefClientRpc/getAlibabaProduct.json",
        method: 'post',
        loading: this.$tt('tip_submiting'),
        data: {
          productId: this.platformProductCode,
          apiKeys: this.apiKeys
        },
        success: (res) => {
          if(res.data.success) {
            this.info = res.data
            this.$emit('getResData', res.data)
          } else {
            this.$message.error(res.data.errorInfo)
          }
        },
      })
    },
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
.skuSelectCard {
  box-sizing: border-box;
  // padding: 20px 0;
  width: 100%;
  // min-height: 300px;
  display: flex;
  flex-direction: column;
  .headerSlot {
    font-size: 18px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search {
    margin-bottom: 20px;
  }
  .infoSlot {
    width: 100%;
    .infoName {
      // height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
    }
    p {
      padding: 0;
      margin: 0;
      margin-bottom: 10px;
      font-size: 12px;
    }
    /deep/ .el-select {
      width: 100%;
    }
  }
  .footerSlot {
    height: 50px;
  }
}
</style>